<template>
  <div ref="dom" class="charts chart-bar"></div>
</template>

<script>
import { on, off } from '@/libs/tool'
export default {
  name: 'Bar',
  props: {
    value: Array,
    text: String,
    subtext: String,
    gradient: {
      type: Boolean,
      default: true
    },
    width: {
      type: String,
      default: '80%'
    },
    color: {
      type: Array,
      default: () => [
        ['#E28656', '#E28656'],
        ['#E2AB56', '#E2AB56'],
        ['#3B71DA', '#3B71DA'],
        ['#37C2BB', '#37C2BB']
      ]
    },
    grid: {
      type: Object,
      default: function () {
        return { top: '15%', left: '3%', right: '5%', bottom: '1%' }
      }
    },
    legend: {
      type: Object,
      default: function () {
        return {
          show: true,
          top: '10px',
          align: 'center'
        }
      }
    },
    isShowOutside: {
      type: Boolean,
      default: false
    },
    formatter: {
      type: String,
      default: '{c}'
    }
  },
  data() {
    return {
      dom: null
    }
  },
  methods: {
    setOption(value) {
      this.value = value
    },
    init() {
      // let category = Object.keys(this.value.list[0])
      // let dataArr = []
      // for(let i = 0 ;i < this.value.list.length; i++) {
      //   let data = Object.values(this.value.list[i])
      //   dataArr.push(data)
      // }
      let color = []
      if (this.gradient) {
        for (let i = 0; i < this.color.length; i++) {
          color.push({
            type: 'linear',
            x: 1,
            y: 0,
            x2: 0,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: this.color[i][0] // 0% 处的颜色
              },
              {
                offset: 1,
                color: this.color[i][1] // 100% 处的颜色
              }
            ]
          })
        }
      } else {
        color = this.color
      }
      const seriesData = [
        {
          gap: 0,
          type: 'funnel',
          left: '0%',
          top: 15,
          bottom: 15,
          width: this.width,
          minSize: '20%',
          silent: true,
          label: {
            show: true,
            position: 'inside',
            fontSize: '12',
            formatter: function (d) {
              var ins = d.value
              return ins
            },
            rich: {
              aa: {
                color: '#fff',
                fontWeight: 400
              }
            }
          },
          itemStyle: {
            borderColor: 'transparent'
          },
          data: this.value
        },
        {
          gap: 0,
          type: 'funnel',
          left: '0%',
          top: 15,
          bottom: 15,
          width: this.width,
          minSize: '20%',
          silent: true,
          label: {
            normal: {
              color: '#333',
              position: 'right',
              formatter: function (d) {
                var ins = '{aa|' + d.name + '}{bb|' + d.percent + '%}'
                return ins
              },
              rich: {
                aa: {
                  align: 'center',
                  color: '#666',
                  fontSize: '12',
                  lineHeight: '30',
                  fontWeight: 400
                },
                bb: {
                  align: 'center',
                  color: '#333',
                  fontSize: '14'
                }
              }
            }
          },
          labelLine: {
            show: true
          },
          data: this.value
        }
      ]
      const option = {
        color: color,
        grid: {
          top: this.grid.top,
          left: this.grid.left,
          right: this.grid.right,
          bottom: this.grid.bottom,
          containLabel: true
        },
        legend: {
          icon: 'rect',
          itemWidth: 12,
          itemHeight: 8,
          textStyle: {
            color: '#fff',
            padding: [0, 0, 0, 4]
          },
          ...this.legend
        },
        series: seriesData
      }
      const echarts = require('echarts')
      this.dom = echarts.init(this.$refs.dom, 'tdTheme')
      this.dom.setOption(option)
    },
    resize() {
      this.dom.resize()
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
      on(window, 'resize', this.resize)
    })
  },
  beforeDestroy() {
    off(window, 'resize', this.resize)
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        if (this.dom) {
          if (newVal) {
            this.setOption(newVal)
            this.init()
          } else {
            this.setOption(oldVal)
          }
        } else {
          this.init()
        }
      },
      deep: true // 对象内部属性的监听，关键。
    }
  }
}
</script>

<style scoped lang="less">
.charts {
  width: 100%;
  height: 100%;
}
</style>
